<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-family: 'Courier New', Courier, monospace;
      font-size: 10px;
      font-weight: 400;
      font-style: italic;
    }

    div {
      /*    font-style  font-weight font-size/line-height font-family */
      font: italic 600 20px/40px "Courier New";
    }

    .text {
      border: 1px solid black;
    }

    #p1 {
      color: palevioletred;
      font-size: 16px;
      text-decoration: line-through;
      text-indent: 2em;
      line-height: 20px;
    }

    #p2 {
      text-align: center;
      font-size: 20px;

    }

    /* <!-- border-radius相关 --> */
    /* radius的值可以为两个 绘制椭圆 */
    .bdd {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background-color: #005971;
    }

    .border-radius-demo1 {

      border-radius: 5px 10px 15px 20px;
    }

    .border-radius-demo2 {
      border-radius: 0px 50px 55px 0px;
    }

    .border-radius-demo3 {
      border-radius: 0px 50% 0px;
    }

    .border-radius-demo4 {
      border-radius: 50%;
    }

    /* 三角形 */
    .bdd2 {
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 50px solid blue;
      border-left: 50px solid #005971;
    }

    .bdd3 {
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 0 solid blue;
      border-left: 50px solid #005971;
    }

    .bdd4 {
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 50px solid blue;
      border-left: 0 solid #005971;
    }

    .bdd5 {
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 0px solid blue;
      border-left: 0px solid #005971;
    }

    .bdd6 {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 50px solid green;
      border-bottom: 0px solid blue;
      border-left: 0px solid #005971;
    }

    .bdd7 {
      width: 0;
      height: 0;
      border-top: 180px solid transparent;
      border-right: 50px solid green;
      border-bottom: 0px solid blue;
      border-left: 0px solid #005971;
    }

    .bdd8 {
      width: 0;
      height: 0;
      /* border-top: 180px solid transparent ;
      border-right: 50px solid green ;
      border-bottom: 0px solid blue ;
      border-left: 0px solid #005971; */
      border-style: solid;
      border-color: transparent #005971 #005971 #005971;
      /* 后面这两个颜色没有用 因为没有宽度 */
      border-width: 180px 50px 0 0;
    }
    .shadow{
      width: 100px;
      height: 100px;
      margin: 50px auto;
                /* x偏移 y偏移 虚实 影子大写 颜色 内外 outset一定不能写 不写就是外 */
      box-shadow: 5px 10px 10px 5px #005971;
    }
  </style>
</head>

<body>
  <!-- font 相关 -->
  <div>这是一段文字</div>
  <p>P1 章节</p>
  <div>
    <p>竟月搏，韩时那韩至入活的承沉一说韩判普。</p>
    <p>竟月搏，韩时那韩至入活的承沉一说韩判普。</p>
    <p>竟月搏，韩时那韩至入活的承沉一说韩判普。</p>
  </div>
  <!-- text 相关 -->
  <div class="text">
    <p id="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, ea!</p>
  </div>
  <div class="text">
    <p id="p2">Asperiores ullam neque quaerat eaque mollitia blanditiis nihil ipsa assumenda!</p>
  </div>
  <hr>
  </hr>
  <!-- border-radius相关 -->
  <div class="bdd border-radius-demo1"></div>
  <div class="bdd border-radius-demo2"></div>
  <div class="bdd border-radius-demo3"></div>
  <div class="bdd border-radius-demo4"></div>
  <!-- 三角形  -->
  <div class="bdd2"></div>
  <div class="bdd3"></div>
  <div class="bdd4"></div>
  <div class="bdd5"></div>
  <div class="bdd6"></div>
  <div class="bdd7"></div>
  <div class="bdd8"></div>
  <!-- 盒子阴影 -->
  <div  class="shadow"></div>
  


</body>

</html>